<template>
  <a-layout class="layout">
    <a-layout-header class="header">
      <h2 class="title">登录</h2>
    </a-layout-header>
    <a-layout-content class="content">
      <img class="logo" src="@/assets/logo1.png" />
      <div class="login-space">
        <a-form :model="formState" name="basic" :label-col="{ span: 8 }" :wrapper-col="{ span: 8 }" autocomplete="off" @finish="onFinish" @finishFailed="onFinishFailed">
          <a-form-item class="login-input-space" label="用户ID" name="userId" :rules="[{ required: true, message: '请输入你的员工ID' }]">
            <a-input v-model:value="formState.userId" />
          </a-form-item>
          <a-form-item class="login-btn-space">
            <a-button class="login-btn" type="primary" html-type="submit" @click="login">登录</a-button>
          </a-form-item>
        </a-form>
      </div>
    </a-layout-content>
    <a-layout-footer class="footer" style="text-align: center"> linjiasheng@jftech.com ©2023 Created by Alvin Lin </a-layout-footer>
  </a-layout>
</template>
<script>
import { defineComponent, ref, reactive } from 'vue'
import { result } from '@/utils/tools'
import { Auth } from '@/service'
import { setRoleDetail, getRoleDetail } from '@/helpers/roleDetail'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
export default defineComponent({
  setup() {
    // vuex
    const store = useStore()
    // vue-router
    const router = useRouter()
    // 登录相关
    const formState = reactive({
      userId: '',
    })
    const login = async () => {
      const res = await Auth.login(formState.userId)
      result(res).success(({ data }) => {
        store.commit('setRoleInfo', data)
        router.push({
          path: '/home',
        })
      })
    }
    history.pushState(null, null, document.URL)

    window.addEventListener(
      'popstate',
      function (e) {
        history.pushState(null, null, document.URL)
      },
      false
    )

    const onFinish = (values) => {
      store.commit('setMyUserId', values.userId)
      console.log(store.state.myUserId)
    }
    const onFinishFailed = (errorInfo) => {
      console.log('Failed:', errorInfo)
    }

    return {
      formState,
      onFinish,
      onFinishFailed,
      login,
    }
  },
})
</script>
<style>
.header {
  display: flex;
  justify-content: center;
}
.title {
  color: white;
}
.layout {
  height: 100%;
}
.content {
  background: no-repeat center/100% url('@/assets/bg.jpg');
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-direction: column;
}
.logo {
  width: 10%;
}
.login-space {
  width: 20%;
  background-color: #fff;
  padding: 20px 20px 0px 20px;
  box-sizing: border-box;
  border-radius: 1.5%;
  opacity: 0.7;
}
.login-input-space {
  width: 100%;
}
.login-btn-space {
  display: flex;
  justify-content: center;
  align-items: center;
}
.login-btn {
  display: block;
  margin: auto;
  width: 100%;
}
.site-layout-content {
  min-height: 280px;
  padding: 24px;
  background: #fff;
}
#components-layout-demo-top .logo {
  float: left;
  width: 120px;
  height: 31px;
  margin: 16px 24px 16px 0;
  background: rgba(255, 255, 255, 0.3);
}
.ant-row-rtl #components-layout-demo-top .logo {
  float: right;
  margin: 16px 0 16px 24px;
}

[data-theme='dark'] .site-layout-content {
  background: #141414;
}
.footer {
  background-color: rgba(0, 0, 0, 0);
  position: fixed;
  z-index: 2;
  bottom: 0px;
  width: 100%;
}
</style>
